<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .ball {
            position: absolute;
            top: 300px;
            left: 500px;
            width: 20px;
            height: 20px;
            background-color: red;
            transition: left 0.2s linear, top 0.2s cubic-bezier(.48, 0, .94, .28);
        }


    </style>
</head>
<body>
<button onclick="move(-1)">左上</button>
<button onclick="move(0)">右下</button>
<button onclick="move(1)">上</button>
<button onclick="move(2)">下</button>
<button onclick="move(3)">左</button>
<button onclick="move(4)">右</button>
<div id="ball" class="ball"></div>
</body>
<script>
    var topN = 300;
    var leftN = 500;

    function move(type) {
        console.log("移动", type, topN, leftN);
        switch (type) {
            case -1:
                topN -= 100;
                leftN -= 100;
                document.getElementById("ball").style.left = leftN + "px";
                document.getElementById("ball").style.top = topN + "px";
                break;
                case 0:
                topN += 100;
                leftN += 100;
                document.getElementById("ball").style.left = leftN + "px";
                document.getElementById("ball").style.top = topN + "px";
                break;
            case 1:
                topN -= 100;
                document.getElementById("ball").style.top = topN + "px";
                break;
            case 2:
                topN += 100;
                document.getElementById("ball").style.top = topN + "px";
                break;
            case 3:
                leftN -= 100;
                document.getElementById("ball").style.left = leftN + "px";
                break;
            case 4:
                leftN += 100;
                document.getElementById("ball").style.left= leftN + "px";
                break;
            case 5:
                topN += 100;
                leftN += 100;
                document.getElementById("ball").style.top = topN + "px";
                document.getElementById("ball").style.left = leftN + "px";
                break;

        }

    }
</script>
</html>